<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼图游戏 Puzzle Master</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>拼图游戏 Puzzle Master</h1>
        </header>
        
        <main>
            <!-- 主菜单 -->
            <div id="main-menu" class="menu-section">
                <h2>选择难度</h2>
                <div class="difficulty-buttons">
                    <button id="beginner-btn" class="btn">入门 (2×2)</button>
                    <button id="easy-btn" class="btn">简单 (3×3)</button>
                    <button id="medium-btn" class="btn">中等 (4×4)</button>
                    <button id="hard-btn" class="btn">困难 (5×5)</button>
                </div>
                <button id="leaderboard-btn" class="btn secondary">排行榜</button>
            </div>
            
            <!-- 游戏界面 -->
            <div id="game-section" class="hidden">
                <div class="game-header">
                    <div class="game-info">
                        <span>步数: <span id="move-count">0</span></span>
                        <span>时间: <span id="time-count">0</span>秒</span>
                    </div>
                    <button id="back-btn" class="btn secondary">返回菜单</button>
                </div>
                
                <div style="display: flex; justify-content: center; align-items: flex-start; gap: 40px;">
                    <div id="puzzle-board" class="puzzle-board"></div>
                    <div>
                        <input type="file" id="upload-img" accept="image/*" style="display:none;">
                        <label for="upload-img" class="btn" style="display:block;margin-bottom:8px;text-align:center;cursor:pointer;">可以选择自己喜欢的图片进行游戏</label>
                        <button id="reset-img-btn" class="btn secondary" style="display:block;margin:0 auto 8px auto;">重置图片</button>
                        <img id="original-image" src="img/tupian.jpeg" alt="原图" style="width: 300px; max-width: 100%; border: 2px solid #ccc; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                    </div>
                </div>
                
                <div id="game-complete" class="hidden">
                    <h2>恭喜完成!</h2>
                    <p>用时: <span id="final-time">0</span>秒</p>
                    <p>步数: <span id="final-moves">0</span></p>
                    <button id="play-again-btn" class="btn">再玩一次</button>
                    <button id="menu-btn" class="btn secondary">返回菜单</button>
                </div>
            </div>
            
            <!-- 排行榜 -->
            <div id="leaderboard-section" class="hidden">
                <h2>排行榜</h2>
                <div id="leaderboard-chart" style="width: 100%; height: 400px;"></div>
                <table id="leaderboard-table" class="leaderboard-table"></table>
                <button id="back-from-leaderboard" class="btn">返回菜单</button>
            </div>
        </main>
    </div>

    <!-- 引入 JavaScript 文件 -->
    <script src="storage.js"></script>
    <script src="game.js"></script>
    <script src="ui.js"></script>
</body>
</html>